{"componentChunkName":"component---src-templates-post-js","path":"/blog/h5kit","webpackCompilationHash":"0f979b9b09e9513b4912","result":{"data":{"site":{"siteMetadata":{"keywords":["blog","ubug","tech blog","技术博客","playground"]}},"mdx":{"fields":{"title":"🪂 又一个 H5 拖放平台","tips":[],"categories":["thinking"],"datetime":"2024-06-01 18:13:35","noFooter":false,"description":"团队准备做一个很有意思的 toC 的个性化互动页面定制，找了一些开源方案，实在是感觉二次开发起来费了力气还是缺这缺那，不自己搭不舒服。","plainTextDescription":"团队准备做一个很有意思的 toC 的个性化互动页面定制，找了一些开源方案，实在是感觉二次开发起来费了力气还是缺这缺那，不自己搭不舒服。\n","author":"Ubug","banner":null,"bannerCredit":null,"slug":"/blog/h5kit","tags":["writing"]},"headings":[{"value":"一、背景和需求","depth":2},{"value":"二、底层设计","depth":2},{"value":"1. 需求、特性、功能","depth":3},{"value":"2. 数据结构","depth":3},{"value":"3. 布局规则","depth":3},{"value":"4. 交互方法","depth":3},{"value":"三、组件系统设计","depth":2},{"value":"1. 渲染结构","depth":3},{"value":"2. 图片渲染","depth":3},{"value":"3. 矢量图形","depth":3},{"value":"4. 属性面板","depth":3},{"value":"四、动画系统","depth":2},{"value":"1. 动画分类","depth":3},{"value":"2. 执行流程","depth":3},{"value":"3. 翻页效果","depth":3},{"value":"五、状态管理","depth":2},{"value":"六、项目总结","depth":2}],"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"h5kit\",\n  \"title\": \"🪂 又一个 H5 拖放平台\",\n  \"date\": \"2024-06-01 18:13:35\",\n  \"author\": \"Ubug\",\n  \"description\": \"团队准备做一个很有意思的 toC 的个性化互动页面定制，找了一些开源方案，实在是感觉二次开发起来费了力气还是缺这缺那，不自己搭不舒服。\",\n  \"categories\": [\"thinking\"],\n  \"tags\": [\"writing\"],\n  \"banner_icon\": \"🚏\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u60F3\\u8BA9\\u4F60\\u4E86\\u89E3\\u7684\\u662F\\u4E00\\u4E2A\\u62D6\\u62FD\\u751F\\u6210\\u7684\\u4F4E\\u4EE3\\u7801\\u5E73\\u53F0\\uFF0C\\u867D\\u7136\\u662F\\u4F4E\\u914D\\u7684\\uFF0C\\u4F46\\u662F\\u5B9E\\u73B0\\u8D77\\u6765\\u8FD8\\u633A\\u6709\\u610F\\u601D\\u3002\"), mdx(\"hr\", null), mdx(\"h2\", null, \"\\u4E00\\u3001\\u80CC\\u666F\\u548C\\u9700\\u6C42\"), mdx(\"p\", null, \"H5 \\u672C\\u6765\\u662F HTML5 \\u7684\\u7F29\\u5199\\uFF0C\\u4E0E CSS3 \\u548C ES5 \\u4EE3\\u8868\\u7740\\u5F53\\u65F6\\u591A\\u5E74\\u8FDF\\u6EDE\\u7684\\u9AD8\\u7EA7\\u6D4F\\u89C8\\u5668\\u7279\\u6027\\u66F4\\u65B0\\uFF0C\\u968F\\u7740\\u79FB\\u52A8\\u4E92\\u8054\\u7F51\\u7684\\u53D1\\u5C55\\uFF0C\\u9010\\u6E10\\u7684\\u542B\\u4E49\\u5728\\u8FD0\\u8425\\u5C42\\u9762\\u53D8\\u6210\\u4E86\\u4E92\\u52A8\\u7F51\\u9875\\uFF0C\\u66F4\\u662F\\u57FA\\u672C\\u4E0A\\u7279\\u6307\\u624B\\u673A\\u7AEF\\u7684\\u4E92\\u52A8\\u8425\\u9500\\u9875\\u9762\\u3002H5 \\u7684\\u5F62\\u5F0F\\u5728\\u5F53\\u65F6\\u662F\\u4E00\\u4E2A\\u975E\\u5E38\\u70ED\\u95E8\\u7684\\u8425\\u9500\\u65B9\\u5F0F\\uFF0C\\u6BD5\\u7ADF\\u5FEB\\u901F\\u63A5\\u5165\\uFF0C\\u83B7\\u5BA2\\u65B9\\u4FBF\\u3002\"), mdx(\"p\", null, \"\\u76EE\\u524D\\u7684 H5 \\u9010\\u6B65\\u53D1\\u5C55\\u6210\\u719F\\uFF0C\\u5305\\u62EC Hybrid H5 \\u7684\\u666E\\u904D\\u5E94\\u7528\\uFF0C\\u8FD8\\u6709\\u7EC4\\u4EF6\\u5E93\\u3001SPA \\u7B49\\u7B49\\u6982\\u5FF5\\u7684\\u5174\\u8D77\\uFF0C\\u8BF4\\u8D77\\u6765\\u5404\\u5927\\u516C\\u53F8\\u7684\\u5B9E\\u9645\\u4E1A\\u52A1\\u66F4\\u591A\\u662F\\u5728\\u505A H5\\uFF0C\\u5728\\u8FFD\\u6C42\\u6025\\u901F\\u654F\\u6377\\u7684\\u5F00\\u53D1\\u9636\\u6BB5\\uFF0C\\u642D\\u5EFA\\u5F0F\\u7684 H5 \\u5E73\\u53F0\\u4E5F\\u5F02\\u5E38\\u4E30\\u5BCC\\u3002\"), mdx(\"p\", null, \"\\u5E7F\\u4E49\\u4E0A\\u7684 h5 \\u7F16\\u8F91\\u5E73\\u53F0\\u53EF\\u4EE5\\u7406\\u89E3\\u6210\\u652F\\u6301\\u56FE\\u6587\\u5F62\\u5F0F\\u3001\\u6240\\u89C1\\u6240\\u5F97\\u7684\\u62D6\\u62FD\\u751F\\u6210\\uFF0C\\u914D\\u5408\\u6570\\u636E\\u5C42\\u3001\\u7EC4\\u4EF6\\u5E93\\u3001\\u7D20\\u6750\\u5E93\\u7B49\\uFF0C\\u6700\\u540E\\u751F\\u6210 h5 \\u7F51\\u9875\\u7684\\u5F62\\u5F0F\\u3002\"), mdx(\"p\", null, \"\\u4ECE\\u529F\\u80FD\\u4E0A\\u6765\\u770B\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u56FE\\u6587\\u7F16\\u8F91\\u5668\\uFF1A\\u9002\\u914D\\u4E8E\\u5404\\u5927\\u516C\\u4F17\\u53F7\\u548C\\u5185\\u5BB9\\u5E73\\u53F0\\uFF0C\\u4E3B\\u8981\\u662F\\u6D41\\u5F0F\\u5E03\\u5C40\\uFF0C\\u91CD\\u70B9\\u5728\\u56FE\\u6587\\u6392\\u7248\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"H5 \\u7F16\\u8F91\\u5668\\uFF1A\\u4F5C\\u4E3A\\u4E92\\u52A8\\u5355\\u9875\\u6216\\u7FFB\\u9875\\uFF0C\\u4E3B\\u8981\\u662F\\u7EDD\\u5BF9\\u5E03\\u5C40\\uFF0C\\u91CD\\u70B9\\u5728\\u8BBE\\u8BA1\\u3001\\u4E92\\u52A8\\u548C\\u52A8\\u753B\\u3002\")), mdx(\"p\", null, \"\\u4ECE\\u65B9\\u5411\\u6765\\u770B\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u8BBE\\u8BA1\\u5411: \\u76EE\\u6807\\u662F\\u4EA7\\u54C1\\u539F\\u578B\\uFF0C\\u91CD\\u70B9\\u5728\\u5E03\\u5C40\\uFF0C\\u81EA\\u9002\\u5E94\\uFF0C\\u5927\\u90E8\\u5206\\u5143\\u7D20\\u662F\\u77E2\\u91CF\\u548C\\u56FE\\u5F62\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u539F\\u578B\\u5411\\uFF1A\\u91CD\\u70B9\\u5728\\u751F\\u6210\\u914D\\u7F6E\\uFF0C\\u6839\\u636E\\u914D\\u7F6E\\u989D\\u5916\\u518D\\u505A\\u751F\\u6210\\uFF0C\\u4E0D\\u8FFD\\u6C42\\u6240\\u89C1\\u6240\\u5F97\\u3002\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u4E1A\\u52A1\\u5411\\uFF1A\\u505A\\u4E00\\u4E2A\\u4E1A\\u52A1\\u5C42\\u7684\\u5FEB\\u642D\\u5E73\\u53F0\\uFF0C\\u5FEB\\u901F\\u642D\\u8425\\u9500\\u843D\\u5730\\u9875\\u3001\\u6D3B\\u52A8\\u9875\\u3001\\u62BD\\u5956\\u9875\\u3001\\u843D\\u5730\\u9875\\u7B49\\u7B49\\u3002\\u65E2\\u6709\\u9762\\u5411\\u5185\\u90E8\\u8FD0\\u8425\\u7684\\u4E1A\\u52A1\\uFF0C\\u9762\\u5411 c \\u7AEF\\u7684\\u9080\\u8BF7\\u51FD\\uFF0C\\u9762\\u5411\\u5F00\\u53D1\\u7684\\u4F4E\\u4EE3\\u7801\\u3002\")), mdx(\"p\", null, \"\\u6211\\u4EEC\\u7684\\u4EA7\\u54C1\\u5C5E\\u6027\\u5C5E\\u4E8E\\u9762\\u5411 c \\u7AEF\\u7684\\u4E00\\u4E2A\\u5FEB\\u642D\\u4E1A\\u52A1\\uFF0C\\u8FFD\\u6C42\\u8BBE\\u8BA1\\u3001\\u4E92\\u52A8\\u548C\\u52A8\\u753B\\uFF0C\\u8BBE\\u8BA1\\u5E08\\u505A\\u597D\\u6A21\\u677F\\uFF0C\\u7528\\u6237\\u81EA\\u5DF1\\u989D\\u5916\\u518D\\u5FAE\\u8C03\\u5B9A\\u5236\\u3002\"), mdx(\"p\", null, \"\\u5728\\u9879\\u76EE\\u521D\\u671F\\uFF0C\\u6211\\u4EEC\\u8C03\\u7814\\u4E86\\u5E02\\u9762\\u4E0A\\u4E3B\\u6D41\\u7684 H5 \\u5E73\\u53F0\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6613\\u4F01\\u79C0\"), \"\\uFF1A\\u6210\\u719F\\u7684\\u6A21\\u677F\\u5E02\\u573A\\uFF0C\\u4F46\\u5B9A\\u5236\\u80FD\\u529B\\u6709\\u9650\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5A5A\\u793C\\u7EAA\"), \"\\uFF1A\\u6A21\\u677F\\u5F3A\\u5927\\u751F\\u6001\\u591A\\u6837\")), mdx(\"p\", null, \"\\u8FD9\\u4E9B\\u5E73\\u53F0\\u5404\\u6709\\u4F18\\u52BF\\uFF0C\\u4F46\\u90FD\\u53EF\\u60DC\\u6CA1\\u6CD5\\u76F4\\u63A5\\u7528\\uFF0C\\u6211\\u4EEC\\u4E1A\\u52A1\\u4E0A\\u9700\\u6C42\\u4E5F\\u5E76\\u4E0D\\u662F\\u5F88\\u590D\\u6742\\uFF0C\\u80FD\\u7528\\u5C31\\u884C\\u6162\\u6162\\u8FED\\u4EE3\\uFF0C\\u521D\\u671F\\u6307\\u5B9A\\u7684\\u76EE\\u6807\\u5C31\\u662F\\u591A\\u9875\\u52A8\\u753B\\u3001\\u56FE\\u7247\\u6587\\u5B57\\u53EF DIY\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5E95\\u5C42\\u8BBE\\u8BA1\"), mdx(\"p\", null, \"\\u8BF4\\u8D77\\u62D6\\u62FD\\u7EC4\\u4EF6\\uFF0C\\u90A3\\u4E48\\u6700\\u6838\\u5FC3\\u7684\\u662F\\u4EC0\\u4E48\\u5462\\uFF1F\\u5BF9\\u54AF\\uFF0C\\u5C31\\u662F\\u5E95\\u5C42\\u8BBE\\u8BA1\\uFF0C\\u5C31\\u662F\\u6570\\u636E\\u7ED3\\u6784\\u3001\\u5E03\\u5C40\\u89C4\\u5219\\u3001\\u4EA4\\u4E92\\u65B9\\u6CD5\\u3002\"), mdx(\"p\", null, \"\\u652F\\u6301\\u54EA\\u4E9B\\u7279\\u6027\\u548C\\u529F\\u80FD\\u76F4\\u63A5\\u80FD\\u591F\\u53CD\\u6620\\u5728\\u6700\\u540E\\u7684\\u6570\\u636E\\u7ED3\\u6784\\u4E0A\\uFF0C\\u53EA\\u6709\\u786E\\u5B9A\\u4E86\\u5E03\\u5C40\\u89C4\\u5219\\u624D\\u80FD\\u786E\\u5B9A\\u6240\\u89C1\\u5373\\u6240\\u5F97\\u7684\\u6CD5\\u5B50\\uFF0C\\u53EA\\u6709\\u7F15\\u6E05\\u4E86\\u4EA4\\u4E92\\u624D\\u80FD\\u7740\\u624B\\u53BB\\u505A\\u3002\"), mdx(\"p\", null, \"\\u6211\\u4EEC\\u505A\\u4E86 4 \\u4E2A\\u6A21\\u5F0F\\u6765\\u652F\\u6301\\u8FD9\\u4E2A\\u9700\\u6C42\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"factory\"), \" \\u2014 PC \\u7AEF\\u7F16\\u8F91\\u5668\\uFF0C\\u8BBE\\u8BA1\\u5E08\\u5168\\u529F\\u80FD\\u8BBE\\u8BA1\\u5DE5\\u4F5C\\u53F0\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"diy\"), \" \\u2014 \\u624B\\u673A\\u7AEF\\u7F16\\u8F91\\uFF0C\\u7528\\u6237\\u7B80\\u5355\\u7684\\u6587\\u5B57\\u56FE\\u7247\\u66FF\\u6362\\u548C\\u9884\\u89C8\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"runner\"), \" \\u2014 \\u7EAF\\u9884\\u89C8\\u64AD\\u653E\\u5668\\uFF0CSwiper \\u9A71\\u52A8\\u7684\\u591A\\u9875\\u7FFB\\u9875\\u5C55\\u793A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"transfer\"), \" \\u2014 \\u7B2C\\u4E09\\u65B9\\u683C\\u5F0F\\u8F6C\\u6362\\u5668\")), mdx(\"h3\", null, \"1. \\u9700\\u6C42\\u3001\\u7279\\u6027\\u3001\\u529F\\u80FD\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u5355\\u9875\\u3001\\u591A\\u9875\\u548C\\u957F\\u9875\\u90FD\\u652F\\u6301\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u56FE\\u7247\\u3001\\u6587\\u5B57\\u3001\\u77E2\\u91CF\\u56FE\\u7B49\\u7D20\\u6750\\uFF0C\\u9884\\u8BBE\\u7684\\u8868\\u5355\\u7B49\\u7EC4\\u4EF6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u52A8\\u753B\\uFF1A\\u8FDB\\u5165\\u3001\\u5F3A\\u8C03\\u3001\\u9000\\u51FA\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u753B\\u5E03\\u7F29\\u653E\\u3001\\u62D6\\u52A8\\u3001\\u65CB\\u8F6C\\u3001\\u5206\\u7EC4\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, \"\\u56FE\\u5C42\\u6DF7\\u5408\\u3001\\u9875\\u9762\\u6EE4\\u955C\")), mdx(\"h3\", null, \"2. \\u6570\\u636E\\u7ED3\\u6784\"), mdx(\"p\", null, \"\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"TypeScript\"), \" \\u81EA\\u7136\\u4E5F\\u8981\\u63D0\\u524D\\u5199\\u4E2A\\u7C7B\\u578B\\uFF0C\\u65B9\\u4FBF\\u540E\\u7EED\\u4F7F\\u7528\\uFF0C\\u6839\\u636E\\u7ECF\\u9A8C\\u52A0\\u4E00\\u70B9\\u70B9\\u8BA8\\u8BBA\\uFF0C\\u786E\\u5B9A\\u51FA\\u57FA\\u672C\\u7ED3\\u6784\\u3002\"), mdx(\"p\", null, \"\\u6574\\u4E2A\\u9875\\u9762\\u6570\\u636E\\u7528 Immutable.js \\u7684 Record \\u6765\\u7BA1\\u7406\\uFF0C\\u8FD9\\u6837\\u7ED3\\u6784\\u6027\\u5171\\u4EAB\\u548C\\u6BD4\\u8F83\\u90FD\\u5F88\\u65B9\\u4FBF\\uFF0C\\u6539\\u4E00\\u4E2A\\u5143\\u7D20\\u4E0D\\u4F1A\\u7275\\u8FDE\\u5230\\u6574\\u68F5\\u6811\\u3002\"), mdx(\"p\", null, \"\\u6700\\u9876\\u5C42\\u662F Page\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"Page {\\n  title: string            // \\u9875\\u9762\\u6807\\u9898\\n  desc: string             // \\u63CF\\u8FF0\\n  width: number            // \\u753B\\u5E03\\u5BBD\\u5EA6\\uFF0C\\u9ED8\\u8BA4 375\\uFF08iPhone \\u5BBD\\u5EA6\\uFF09\\n  height: number           // \\u753B\\u5E03\\u9AD8\\u5EA6\\uFF0C\\u9ED8\\u8BA4 667\\n  views: List<View>        // \\u6709\\u5E8F\\u5217\\u8868\\uFF0C\\u6BCF\\u4E2A View \\u5C31\\u662F\\u4E00\\u9875\\n  defaultViewState: ViewState   // \\u9ED8\\u8BA4\\u7684\\u9875\\u9762\\u89C6\\u89C9\\u72B6\\u6001\\n  viewEffect: string       // \\u7FFB\\u9875\\u6548\\u679C\\uFF1Aswiper|scroll|fade|cube|flip|creative-1~6\\n  music: string            // \\u80CC\\u666F\\u97F3\\u4E50\\u5730\\u5740\\n  musicLoop: boolean       // \\u9ED8\\u8BA4 true\\n  blobs: { [key]: string } // \\u5185\\u5D4C\\u8D44\\u6E90\\uFF0Cbase64 \\u6216 SVG \\u5B57\\u7B26\\u4E32\\n}\\n\")), mdx(\"p\", null, \"View \\u5C31\\u662F\\u4E00\\u5F20\\u5E7B\\u706F\\u7247\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"View {\\n  id: string\\n  elements: List<Elem>     // \\u9875\\u9762\\u4E0A\\u7684\\u5143\\u7D20\\u5217\\u8868\\n  state: ViewState         // \\u80CC\\u666F\\u8272\\u3001\\u6EE4\\u955C\\u7B49\\n}\\n\")), mdx(\"p\", null, \"\\u5143\\u7D20\\u662F\\u6838\\u5FC3\\uFF0C\\u6240\\u6709\\u5143\\u7D20\\u5171\\u4EAB\\u4E00\\u7EC4\\u57FA\\u7840\\u5C5E\\u6027\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"ElemBaseProps {\\n  name, id, x, y, width, height\\n  rotation       // \\u65CB\\u8F6C\\u89D2\\u5EA6\\n  blend          // CSS mix-blend-mode\\n  opacity        // 0-100\\n  filter         // \\u6EE4\\u955C\\u9884\\u8BBE\\u540D\\n  animations     // \\u52A8\\u753B\\u5217\\u8868\\n  backgroundColor\\n  borderRadius   // \\u56DB\\u4E2A\\u89D2\\u72EC\\u7ACB\\u63A7\\u5236\\n  keepRatio      // \\u9501\\u5B9A\\u5BBD\\u9AD8\\u6BD4\\n  locked, visible\\n  diy            // \\u662F\\u5426\\u5141\\u8BB8\\u7528\\u6237 DIY \\u7F16\\u8F91\\n}\\n\")), mdx(\"p\", null, \"\\u8FD9\\u91CC\\u6709\\u4E2A\\u6BD4\\u8F83\\u5173\\u952E\\u7684\\u8BBE\\u8BA1\\u51B3\\u7B56\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u5143\\u7D20\\u7684 x\\u3001y \\u5750\\u6807\\u662F\\u4E2D\\u5FC3\\u70B9\\uFF0C\\u4E0D\\u662F\\u5DE6\\u4E0A\\u89D2\"), \"\\u3002\\u8FD9\\u4E48\\u505A\\u7684\\u597D\\u5904\\u662F\\u65CB\\u8F6C\\u65F6\\u5929\\u7136\\u7ED5\\u89C6\\u89C9\\n\\u4E2D\\u5FC3\\u8F6C\\uFF0C\\u4E0D\\u9700\\u8981\\u989D\\u5916\\u7B97\\u504F\\u79FB\\uFF1B\\u5BF9\\u9F50\\u4E24\\u4E2A\\u5143\\u7D20\\u4E5F\\u662F\\u5BF9\\u9F50\\u4E2D\\u5FC3\\u70B9\\uFF0C\\u76F4\\u89C9\\u4E0A\\u66F4\\u81EA\\u7136\\u3002\"), mdx(\"p\", null, \"\\u5177\\u4F53\\u6709 4 \\u79CD\\u5143\\u7D20\\u7C7B\\u578B\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"ElemImg\"), \"\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"type: \\\"image\\\"\"), \"\\uFF09\\uFF1A\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"src\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fit\"), \"\\uFF08cover/contain/none\\uFF09\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fitPos\")), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"ElemText\"), \"\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"type: \\\"text\\\"\"), \"\\uFF09\\uFF1A\\u52A0\\n\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"content\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fontSize\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fontFamily\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"color\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"lineHeight\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"textAlign\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"letterSpacing\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"textEffect\"), \"\\n\\u7B49\\u4E00\\u6574\\u5957\\u6587\\u5B57\\u5C5E\\u6027\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"ElemShape\"), \"\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"type: \\\"shape\\\"\"), \"\\uFF09\\uFF1A\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fill\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"stroke\"), \"\\u3001\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"strokeWidth\"), \"\\uFF0C\\u4EE5\\u53CA\\u4E00\\u4E2A SVG \\u6A21\\u677F\\u5B57\\u7B26\\u4E32\\uFF08\\u652F\\n\\u6301 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"{{expression}}\"), \" \\u6A21\\u677F\\u8BED\\u6CD5\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"ElemGroup\"), \"\\uFF08\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"type: \\\"group\\\"\"), \"\\uFF09\\uFF1A\\u52A0 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"elems: List<Elem>\"), \"\\uFF0C\\u9012\\u5F52\\u7ED3\\u6784\\uFF0C\\u7EC4\\u91CC\\u53EF\\u4EE5\\u5D4C\\u5957\\u7EC4\")), mdx(\"h3\", null, \"3. \\u5E03\\u5C40\\u89C4\\u5219\"), mdx(\"p\", null, \"\\u5143\\u7D20\\u5168\\u90E8\\u7528\\u7EDD\\u5BF9\\u5B9A\\u4F4D\\uFF0C\\u753B\\u5E03\\u672C\\u8EAB\\u662F\\u4E00\\u4E2A 8000\\xD78000 \\u7684\\u865A\\u62DF\\u7A7A\\u95F4\\uFF0C\\u901A\\u8FC7 CSS transform \\u7684 scale \\u548C translate \\u6765\\n\\u5B9E\\u73B0\\u7F29\\u653E\\u548C\\u5E73\\u79FB\\u3002\"), mdx(\"p\", null, \"\\u5B9A\\u4F4D\\u7684\\u6838\\u5FC3\\u903B\\u8F91\\u901A\\u8FC7 CSS \\u53D8\\u91CF\\u5B9E\\u73B0\\uFF0C\\u56E0\\u4E3A x/y \\u662F\\u4E2D\\u5FC3\\u70B9\\uFF0C\\u6240\\u4EE5\\u9700\\u8981\\u7B97\\u4E00\\u6B21\\u504F\\u79FB\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"--ele-x: calc({x}px - (var(--ele-w) / 2))\\n--ele-y: calc({y}px - (var(--ele-h) / 2))\\n--ele-w: {width}px\\n--ele-h: {height}px\\n\\ntransform: translate(var(--ele-x), var(--ele-y))\\n\")), mdx(\"p\", null, \"\\u7EC4\\u5185\\u7684\\u5143\\u7D20\\u5750\\u6807\\u5219\\u662F\\u767E\\u5206\\u5236\\u7684\\uFF0C\\u76F8\\u5BF9\\u4E8E\\u7EC4\\u7684\\u5C3A\\u5BF8\\u6765\\u7B97\\u3002\\u8FD9\\u6837\\u7EC4 resize \\u7684\\u65F6\\u5019\\u5B50\\u5143\\u7D20\\u4F1A\\u7B49\\u6BD4\\u7F29\\u653E\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-css\"\n  }, \"--ele-w: calc({width}% / 100 * var(--ele-group-w))\\n--ele-x: calc({x}% * var(--ele-group-w) - var(--ele-w) / 2)\\n\")), mdx(\"p\", null, \"\\u4E0D\\u540C\\u6A21\\u5F0F\\u7684\\u7F29\\u653E\\u7B56\\u7565\\u4E0D\\u4E00\\u6837\\uFF1A\\u7F16\\u8F91\\u5668\\u91CC\\u7528\\u6237\\u81EA\\u5DF1\\u6EDA\\u8F6E\\u7F29\\u653E\\u3001diy \\u548C\\u64AD\\u653E\\u6A21\\u5F0F\\u4E0B\\u6839\\u636E\\n\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"window.innerWidth / page.width\"), \" \\u81EA\\u9002\\u5E94\\u3002\"), mdx(\"h3\", null, \"4. \\u4EA4\\u4E92\\u65B9\\u6CD5\"), mdx(\"p\", null, \"\\u753B\\u5E03\\u4EA4\\u4E92\\u7531 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"MoveBox\"), \" \\u7C7B\\u7EDF\\u4E00\\u7BA1\\u7406\\uFF0C\\u5B83\\u7EE7\\u627F\\u81EA EventEmitter\\uFF0C\\u5904\\u7406\\u6240\\u6709\\u9F20\\u6807\\u4E8B\\u4EF6\\u3002\\u4EA4\\u4E92\\u6A21\\u5F0F\\u5305\\u62EC\\uFF1A\\u9009\\u62E9\\u3001\\u62D6\\u52A8\\u753B\\u5E03\\u3001\\u7F29\\u653E\\u3001\\u653E\\u7F6E\\u6587\\u5B57\\u3001\\u653E\\u7F6E\\u56FE\\u5F62\\u3002\"), mdx(\"p\", null, \"\\u62D6\\u62FD\\u8FC7\\u7A0B\\u4E2D\\u6709\\u4E00\\u4E2A\\u6027\\u80FD\\u4F18\\u5316\\uFF1A\", mdx(\"strong\", {\n    parentName: \"p\"\n  }, \"\\u4E0D\\u66F4\\u65B0 React \\u72B6\\u6001\\uFF0C\\u800C\\u662F\\u76F4\\u63A5\\u6539 DOM \\u4E0A\\u7684 CSS \\u53D8\\u91CF\"), \"\\u3002\\u53EA\\u6709\\u9F20\\u6807\\u677E\\u5F00\\u65F6\\u624D\\u628A\\u6700\\u7EC8\\u503C\\u63D0\\u4EA4\\u5230 Immutable \\u6570\\u636E\\u6A21\\u578B\\u91CC\\u3002\\u8FD9\\u6837\\u62D6\\u62FD\\u5168\\u7A0B\\u4E0D\\u4F1A\\u6709 React re-render\\uFF0C\\u4FDD\\u6301 60fps\\u3002\"), mdx(\"p\", null, \"\\u53E6\\u5916\\u5B9E\\u73B0\\u4E86\\u4E09\\u5957\\u5438\\u9644\\u7CFB\\u7EDF\\uFF0C\\u53EF\\u4EE5\\u72EC\\u7ACB\\u5F00\\u5173\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5143\\u7D20\\u5438\\u9644\"), \"\\uFF1A\\u548C\\u5176\\u4ED6\\u5143\\u7D20\\u7684\\u8FB9\\u7F18/\\u4E2D\\u5FC3\\u5BF9\\u9F50\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u753B\\u5E03\\u5438\\u9644\"), \"\\uFF1A\\u5BF9\\u9F50\\u5230\\u9875\\u9762\\u8FB9\\u754C\\u548C\\u4E2D\\u5FC3\\u7EBF\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u50CF\\u7D20\\u5438\\u9644\"), \"\\uFF1A\\u5750\\u6807\\u53D6\\u6574\")), mdx(\"p\", null, \"\\u5438\\u9644\\u68C0\\u6D4B\\u7528\\u7684\\u8DDD\\u79BB\\u9608\\u503C\\u9ED8\\u8BA4 5px\\uFF0C\\u65CB\\u8F6C\\u65F6\\u5438\\u9644\\u5230 45\\xB0 \\u7684\\u6574\\u6570\\u500D\\u3002\\u8FD8\\u6709\\u6846\\u9009\\u529F\\u80FD\\uFF0C\\u901A\\u8FC7 SAT\\uFF08\\u5206\\u79BB\\u8F74\\u5B9A\\u7406\\uFF09\\u78B0\\u649E\\u68C0\\u6D4B\\u6765\\u652F\\u6301\\u65CB\\u8F6C\\u5143\\u7D20\\u7684\\u6B63\\u786E\\u6846\\u9009\\u3002\"), mdx(\"h2\", null, \"\\u4E09\\u3001\\u7EC4\\u4EF6\\u7CFB\\u7EDF\\u8BBE\\u8BA1\"), mdx(\"h3\", null, \"1. \\u6E32\\u67D3\\u7ED3\\u6784\"), mdx(\"p\", null, \"\\u6CA1\\u6709\\u641E\\u4EC0\\u4E48\\u7EC4\\u4EF6\\u6CE8\\u518C\\u8868\\uFF0C\\u5C31\\u662F\\u6734\\u7D20\\u7684\\u7C7B\\u578B\\u5224\\u65AD\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-tsx\"\n  }, \"{elem.type === 'image' && <ElementImage ... />}\\n{elem.type === 'text'  && <ElementText ... />}\\n{elem.type === 'shape' && <ElementShape ... />}\\n{elem.type === 'group' && <ElementGroup ... />}\\n\")), mdx(\"p\", null, \"\\u6BCF\\u4E2A\\u5143\\u7D20\\u6E32\\u67D3\\u6210\\u4E09\\u5C42\\u5D4C\\u5957\\u7684 DOM \\u7ED3\\u6784\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<div class=\\\"h5kit-element\\\">\\n  <!-- \\u5916\\u5C42\\uFF1A\\u5B9A\\u4F4D -->\\n  <div class=\\\"h5kit-element-anim\\\">\\n    <!-- \\u4E2D\\u5C42\\uFF1A\\u52A8\\u753B -->\\n    <div class=\\\"h5kit-element-rotation\\\">\\n      <!-- \\u5185\\u5C42\\uFF1A\\u65CB\\u8F6C -->\\n      <div class=\\\"h5kit-element-content\\\"><!-- \\u5185\\u5BB9 --></div>\\n    </div>\\n  </div>\\n</div>\\n\")), mdx(\"p\", null, \"\\u628A\\u52A8\\u753B\\u3001\\u65CB\\u8F6C\\u3001\\u5185\\u5BB9\\u5206\\u5230\\u4E0D\\u540C\\u7684\\u5C42\\u4E0A\\uFF0C\\u5404\\u81EA\\u72EC\\u7ACB\\u63A7\\u5236\\u4E92\\u4E0D\\u5E72\\u6270\\u3002\\u52A8\\u753B\\u5305\\u88F9\\u5728\\u6700\\u5916\\u9762\\uFF0C\\u6240\\u4EE5\\u52A8\\u753B\\u751F\\u6548\\u65F6\\u8FDE\\u65CB\\u8F6C\\u90FD\\u5E26\\u4E0A\\uFF1B\\u65CB\\u8F6C\\u53EA\\u7BA1\\u81EA\\u5DF1\\u7684 transform\\uFF1B\\u5185\\u5BB9\\u5C42\\u53EA\\u7BA1\\u6E32\\u67D3\\u3002\"), mdx(\"h3\", null, \"2. \\u56FE\\u7247\\u6E32\\u67D3\"), mdx(\"p\", null, \"\\u56FE\\u7247\\u7528\\u7684\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"background-image\"), \" \\u800C\\u4E0D\\u662F \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"<img>\"), \" \\u6807\\u7B7E\\uFF0C\\u8FD9\\u6837 cover/contain \\u7684\\u9002\\u914D\\u76F4\\u63A5\\u7528 CSS \\u641E\\u5B9A\\u3002\\u56FE\\u7247\\u6765\\u6E90\\u8D70\\u4E86\\u4E09\\u7EA7\\u67E5\\u627E\\uFF1A\\u5148\\u67E5 blobs \\u5B57\\u5178\\uFF08\\u5185\\u5D4C\\u8D44\\u6E90\\uFF09\\uFF0C\\u518D\\u8BD5 HTTP URL \\u6216 data URI\\uFF0C\\u6700\\u540E\\u67E5localForage\\uFF08IndexedDB \\u91CC\\u5B58\\u7684 Blob\\uFF09\\uFF0C\\u5C3D\\u53EF\\u80FD\\u7684\\u907F\\u514D\\u8D44\\u6E90\\u91CD\\u590D\\u5D4C\\u5165\\u95EE\\u9898\\u3002\"), mdx(\"h3\", null, \"3. \\u77E2\\u91CF\\u56FE\\u5F62\"), mdx(\"p\", null, \"Shape \\u7528\\u7684\\u662F SVG \\u6A21\\u677F\\u5F15\\u64CE\\u3002\\u6A21\\u677F\\u91CC\\u53EF\\u4EE5\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"{{expression}}\"), \" \\u5199 JavaScript \\u8868\\u8FBE\\u5F0F\\uFF0C\\u8FD0\\u884C\\u65F6\\u6C99\\u76D2\\u6C42\\u503C\\uFF0C\\u4E0A\\u4E0B\\u6587\\u91CC\\u6CE8\\u5165\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"__WIDTH__\"), \" \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"__HEIGHT__\"), \" \\u4E24\\u4E2A\\u53D8\\u91CF\\u3002\"), mdx(\"p\", null, \"\\u6BD4\\u5982\\u753B\\u4E00\\u4E2A\\u81EA\\u9002\\u5E94\\u7684\\u5706\\uFF1A\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-svg\"\n  }, \"<circle cx=\\\"{{__WIDTH__/2}}\\\" cy=\\\"{{__HEIGHT__/2}}\\\"\\n        r=\\\"{{Math.min(__WIDTH__,__HEIGHT__)/2}}\\\"/>\\n\")), mdx(\"p\", null, \"\\u5904\\u7406\\u987A\\u5E8F\\u662F\\u5148 HTML \\u89E3\\u7801\\uFF0C\\u518D\\u6C42\\u503C\\u6A21\\u677F\\u8868\\u8FBE\\u5F0F\\uFF0C\\u6700\\u540E\\u628A\\u5269\\u4F59\\u7684 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"__WIDTH__\"), \"/\", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"__HEIGHT__\"), \" \\u5B57\\u9762\\u91CF\\u66FF\\u6362\\u6210\\u5B9E\\u9645\\u5C3A\\u5BF8\\u3002\\u586B\\u5145\\u8272\\u548C\\u63CF\\u8FB9\\u8272\\u901A\\u8FC7\\u52A8\\u6001\\u6CE8\\u5165 CSS \\u89C4\\u5219\\u6765\\u5E94\\u7528\\uFF0C\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"!important\"), \" \\u8986\\u76D6 SVG \\u5185\\u8054\\u6837\\u5F0F\\u3002\"), mdx(\"h3\", null, \"4. \\u5C5E\\u6027\\u9762\\u677F\"), mdx(\"p\", null, \"\\u53F3\\u4FA7\\u5C5E\\u6027\\u9762\\u677F\\u57FA\\u4E8E TweakPane \\u505A\\u4E86\\u4E8C\\u6B21\\u5F00\\u53D1\\uFF08fork \\u4E86\\u4E00\\u4EFD\\u653E\\u5728\\u9879\\u76EE\\u91CC\\uFF09\\uFF0C\\u52A0\\u4E86\\u51E0\\u4E2A\\u81EA\\u5B9A\\u4E49\\u63D2\\u4EF6\\uFF1A\\u56FE\\u7247\\u9884\\u89C8\\u4E0A\\u4F20\\u3001SVG \\u9884\\u89C8\\u3001\\u591A\\u884C\\u6587\\u672C\\u3001\\u8D1D\\u585E\\u5C14\\u66F2\\u7EBF\\u9009\\u62E9\\u5668\\u7B49\\u3002\\u8FD9\\u6837\\u7684\\u597D\\u5904\\u662F\\u4E0D\\u7528\\u5904\\u7406\\u592A\\u590D\\u6742\\u7684\\u8868\\u5355\\u903B\\u8F91\\uFF0C\\u53EA\\u9700\\u8981\\u4E00\\u4E2A\\u7F16\\u8F91\\u9762\\u677F\\u7684\\u63A7\\u5236\\uFF0C\\u5176\\u4ED6\\u5168\\u90FD\\u5C01\\u5230 TweakPane \\u4E2D\\uFF0C\\u6BD5\\u7ADF\\u4E5F\\u4E0D\\u6D89\\u53CA\\u592A\\u591A\\u7684\\u53D6\\u503C\\u548C\\u52A8\\u6001\\u8868\\u5355\\u3002\\u4E5F\\u5C31\\u4E0D\\u9700\\u8981\\u5F15\\u5165\\u989D\\u5916\\u7684 formify \\u4E4B\\u7C7B\\u7684\\u5E93\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u9009\\u4E2D\\u5355\\u4E2A\\u5143\\u7D20\\u65F6\\u5C55\\u793A\\u5B8C\\u6574\\u5C5E\\u6027\\uFF1A\\u4F4D\\u7F6E\\u3001\\u5C3A\\u5BF8\\u3001\\u65CB\\u8F6C\\u3001\\u5706\\u89D2\\u3001\\u900F\\u660E\\u5EA6\\u3001\\u6DF7\\u5408\\u6A21\\u5F0F\\u3001\\u6EE4\\u955C\\u3001\\u80CC\\u666F\\u8272\\u7B49\\u3002\\u9009\\u4E2D\\u591A\\u4E2A\\u5143\\u7D20\\u65F6\\u5C55\\u793A\\u6279\\u91CF\\u64CD\\u4F5C\\uFF1A\\u5206\\u7EC4/\\u53D6\\u6D88\\u5206\\u7EC4\\u3001\\u516D\\u5BAB\\u683C\\u5BF9\\u9F50\\u3001\\u56DB\\u5BAB\\u683C\\u5206\\u5E03\\u3002\\u6587\\u5B57\\u3001\\u56FE\\u7247\\u3001\\u56FE\\u5F62\\u5404\\u81EA\\u8FD8\\u6709\\u72EC\\u7ACB\\u7684\\u7C7B\\u578B\\u9762\\u677F\\u3002\"), mdx(\"h2\", null, \"\\u56DB\\u3001\\u52A8\\u753B\\u7CFB\\u7EDF\"), mdx(\"h3\", null, \"1. \\u52A8\\u753B\\u5206\\u7C7B\"), mdx(\"p\", null, \"\\u5728 animate.css \\u7684\\u57FA\\u7840\\u4E0A\\u505A\\u7684\\u52A8\\u6548\\uFF0C\\u603B\\u5171\\u5927\\u6982 90 \\u591A\\u4E2A\\uFF0C\\u5206\\u4E09\\u7C7B\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u8FDB\\u5165\\u52A8\\u753B\"), \"\\uFF0846 \\u4E2A\\uFF09\\uFF1AfadeIn \\u7CFB\\u5217\\u3001slideIn \\u7CFB\\u5217\\u3001bounceIn \\u7CFB\\u5217\\u3001zoomIn \\u7CFB\\u5217\\u3001rotateIn \\u7CFB\\u5217\\uFF0C\\u8FD8\\u6709\\n\\u81EA\\u5B9A\\u4E49\\u7684 curve \\u66F2\\u7EBF\\u52A8\\u753B\\u548C\\u767E\\u5206\\u6BD4\\u8DDD\\u79BB\\u52A8\\u753B\\uFF08\\u6BD4\\u5982 \", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"fadeInDown30per\"), \" \\u53EA\\u79FB\\u52A8 30% \\u7684\\u8DDD\\u79BB\\uFF09\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u9000\\u51FA\\u52A8\\u753B\"), \"\\uFF0828 \\u4E2A\\uFF09\\uFF1AfadeOut\\u3001slideOut\\u3001bounceOut \\u7B49\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5F3A\\u8C03\\u52A8\\u753B\"), \"\\uFF0816 \\u4E2A\\uFF09\\uFF1Abounce\\u3001pulse\\u3001shake\\u3001swing\\u3001tada\\u3001jello\\u3001heartBeat \\u7B49\")), mdx(\"p\", null, \"\\u6BCF\\u4E2A\\u52A8\\u753B\\u6761\\u76EE\\u6709\\u81EA\\u5DF1\\u7684\\u914D\\u7F6E\\uFF1A\\u5EF6\\u8FDF\\u3001\\u65F6\\u957F\\u3001\\u7F13\\u52A8\\u66F2\\u7EBF\\u3001\\u91CD\\u590D\\u6B21\\u6570\\uFF081-5 \\u6216\\u65E0\\u9650\\u5FAA\\u73AF\\uFF09\\u3002\"), mdx(\"h3\", null, \"2. \\u6267\\u884C\\u6D41\\u7A0B\"), mdx(\"p\", null, \"\\u64AD\\u653E\\u65F6\\u6309 View \\u904D\\u5386\\u6BCF\\u4E2A\\u5143\\u7D20\\uFF0C\\u518D\\u904D\\u5386\\u6BCF\\u4E2A\\u5143\\u7D20\\u4E0A\\u7684\\u52A8\\u753B\\u5217\\u8868\\uFF0C\\u9010\\u4E2A\\u6267\\u884C\\u3002\\u5177\\u4F53\\u64CD\\u4F5C\\u5C31\\u662F\\u627E\\u5230 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \".h5kit-element-anim\"), \" \\u8282\\u70B9\\uFF0C\\u6E05\\u6389\\u65E7\\u7684 class\\uFF0C\\u8BBE\\u7F6E inline style\\uFF08duration\\u3001delay\\u3001repeat\\u3001timing\\uFF09\\uFF0C\\u52A0\\u4E0A \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animate__animated\"), \" \\u548C\\u5BF9\\u5E94\\u7684\\u52A8\\u753B class\\uFF0C\\u76D1\\u542C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animationend\"), \" \\u4E8B\\u4EF6\\u3002\"), mdx(\"p\", null, \"\\u7F16\\u8F91\\u5668\\u548C\\u64AD\\u653E\\u5668\\u6709\\u4E2A\\u533A\\u522B\\uFF1A\\u7F16\\u8F91\\u5668\\u91CC\\u52A8\\u753B\\u64AD\\u5B8C\\u540E\\u4F1A\\u6E05\\u6389 CSS class\\uFF0C\\u8BA9\\u5143\\u7D20\\u56DE\\u5230\\u521D\\u59CB\\u4F4D\\u7F6E\\u65B9\\u4FBF\\u7EE7\\u7EED\\u7F16\\u8F91\\uFF1B\\u64AD\\u653E\\u6A21\\u5F0F\\u4E0B\\u65E0\\u9650\\u5FAA\\u73AF\\u52A8\\u753B\\u4E0D\\u4F1A\\u76D1\\u542C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"animationend\"), \"\\uFF0C\\u8BA9\\u5B83\\u4E00\\u76F4\\u64AD\\u3002\"), mdx(\"h3\", null, \"3. \\u7FFB\\u9875\\u6548\\u679C\"), mdx(\"p\", null, \"\\u591A\\u9875\\u4E4B\\u95F4\\u7684\\u5207\\u6362\\u6548\\u679C\\u57FA\\u4E8E Swiper\\uFF0C\\u652F\\u6301 swiper\\u3001scroll\\u3001fade\\u3001cube\\u3001flip \\u4EE5\\u53CA 6 \\u79CD creative \\u6548\\u679C\\u3002\"), mdx(\"h2\", null, \"\\u4E94\\u3001\\u72B6\\u6001\\u7BA1\\u7406\"), mdx(\"p\", null, \"\\u81EA\\u5DF1\\u5199\\u4E86\\u4E00\\u4E2A\\u8F7B\\u91CF\\u7684\\u72B6\\u6001\\u7BA1\\u7406\\u6846\\u67B6\\u53EB Novus\\uFF0C\\u6838\\u5FC3\\u601D\\u8DEF\\u7C7B\\u4F3C zustand \\u4F46\\u7B80\\u5355\\u5F88\\u591A\\u3002\"), mdx(\"p\", null, \"\\u4E24\\u4E2A Model\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"DesignModel\"), \"\\uFF1A\\u9875\\u9762\\u6570\\u636E\\u3001\\u5143\\u7D20\\u3001\\u64A4\\u9500\\u91CD\\u505A\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"ConfModel\"), \"\\uFF1A\\u753B\\u5E03\\u72B6\\u6001\\u3001\\u7126\\u70B9\\u3001\\u9762\\u677F\\u3001\\u5438\\u9644\\u8BBE\\u7F6E\")), mdx(\"p\", null, \"\\u8BA2\\u9605\\u673A\\u5236\\u7528\\u4E86\\u4F9D\\u8D56\\u6570\\u7EC4\\uFF0C\\u53EA\\u6709\\u6307\\u5B9A\\u7684 Model \\u53D8\\u4E86\\u624D\\u89E6\\u53D1\\u5BF9\\u5E94\\u7684\\u8BA2\\u9605\\u8005\\u3002\\u901A\\u77E5\\u8C03\\u5EA6\\u7528 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"requestIdleCallback\"), \" \\u505A16ms \\u7684\\u65F6\\u95F4\\u5207\\u7247\\uFF0C\\u9632\\u6B62\\u77ED\\u65F6\\u95F4\\u5185\\u5927\\u91CF\\u72B6\\u6001\\u53D8\\u66F4\\u5BFC\\u81F4\\u6E32\\u67D3\\u98CE\\u66B4\\u3002\\u540C\\u4E00\\u4E2A\\u5FAE\\u4EFB\\u52A1\\u5185\\u7684\\u591A\\u6B21 setState \\u4F1A\\u5408\\u5E76\\u6210\\u4E00\\u6B21\\u901A\\u77E5\\u3002\"), mdx(\"p\", null, \"React \\u4FA7\\u63D0\\u4F9B\\u4E86 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"connect\"), \" HOC \\u548C \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"useNovus\"), \" Hook\\uFF0CHook \\u91CC\\u7528 ES Proxy \\u505A\\u4E86\\u7B2C\\u4E00\\u8F6E\\u6E32\\u67D3\\u65F6\\u7684\\u81EA\\u52A8\\u4F9D\\u8D56\\u6536\\u96C6\\u3002\"), mdx(\"p\", null, \"\\u64A4\\u9500\\u91CD\\u505A\\u7EF4\\u62A4\\u4E86 undoList \\u548C redoList\\uFF0C\\u6700\\u591A 50 \\u6761\\u5386\\u53F2\\uFF0C\\u6BCF\\u6B21 \", mdx(\"inlineCode\", {\n    parentName: \"p\"\n  }, \"updatePageWithHistory\"), \" \\u63A8\\u5165\\u5F53\\u524D\\u5FEB\\u7167\\u5E76\\u6E05\\u7A7A\\u91CD\\u505A\\u6808\\u3002\"), mdx(\"h2\", null, \"\\u516D\\u3001\\u9879\\u76EE\\u603B\\u7ED3\"), mdx(\"p\", null, \"\\u505A\\u4E0B\\u6765\\u6574\\u4F53\\u8FD8\\u662F\\u6BD4\\u8F83\\u987A\\u5229\\u7684\\uFF0C\\u6BD5\\u7ADF\\u9700\\u6C42\\u660E\\u786E\\uFF0C\\u4E0D\\u8FFD\\u6C42\\u5927\\u800C\\u5168\\u3002\\u56DE\\u5934\\u6765\\u770B\\u51E0\\u4E2A\\u6BD4\\u8F83\\u503C\\u5F97\\u8BB0\\u5F55\\u7684\\u70B9\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E2D\\u5FC3\\u70B9\\u5750\\u6807\\u7CFB\\u8FD9\\u4E2A\\u8BBE\\u8BA1\\u867D\\u7136\\u4E00\\u5F00\\u59CB\\u89C9\\u5F97\\u522B\\u626D\\uFF0C\\u4F46\\u540E\\u9762\\u65CB\\u8F6C\\u3001\\u5BF9\\u9F50\\u3001\\u5206\\u7EC4\\u90FD\\u56E0\\u6B64\\u7B80\\u5316\\u4E86\\u4E0D\\u5C11\\u903B\\u8F91\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u62D6\\u62FD\\u65F6\\u76F4\\u63A5\\u64CD\\u4F5C CSS \\u53D8\\u91CF\\u7ED5\\u8FC7 React\\uFF0C\\u8FD9\\u4E2A\\u4F18\\u5316\\u6548\\u679C\\u7ACB\\u7AFF\\u89C1\\u5F71\\uFF0C\\u753B\\u5E03\\u4E0A\\u51E0\\u5341\\u4E2A\\u5143\\u7D20\\u62D6\\u8D77\\u6765\\u4E5F\\u4E0D\\u4F1A\\u5361\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"SVG \\u6A21\\u677F\\u5F15\\u64CE\\u7B80\\u5355\\u4F46\\u591F\\u7528\\uFF0C\", mdx(\"inlineCode\", {\n    parentName: \"li\"\n  }, \"{{expression}}\"), \" \\u7684\\u65B9\\u5F0F\\u8BA9\\u8BBE\\u8BA1\\u5E08\\u53EF\\u4EE5\\u7075\\u6D3B\\u5730\\u753B\\u5404\\u79CD\\u81EA\\u9002\\u5E94\\u56FE\\u5F62\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E09\\u7EA7\\u56FE\\u7247\\u8D44\\u6E90\\u67E5\\u627E\\uFF08blobs \\u2192 URL \\u2192 localForage\\uFF09\\u8986\\u76D6\\u4E86\\u79BB\\u7EBF\\u548C\\u5728\\u7EBF\\u573A\\u666F\")), mdx(\"p\", null, \"\\u540E\\u7EED\\u8BA1\\u5212\\u662F\\u8865\\u4E0A undo/redo \\u7684\\u5FEB\\u6377\\u952E\\u3001\\u652F\\u6301\\u66F4\\u591A SVG \\u6EE4\\u955C\\u9884\\u8BBE\\u3001\\u4EE5\\u53CA\\u628A diy \\u6A21\\u5F0F\\u4E0B\\u7684\\u4EA4\\u4E92\\u4F53\\u9A8C\\u518D\\u6253\\u78E8\\u4E00\\u4E0B\\u3002\\u6574\\u4F53\\u6765\\u8BF4\\uFF0C\\u5BF9\\u4E8E\\u4E00\\u4E2A\\u9762\\u5411 C \\u7AEF\\u7684\\u8F7B\\u91CF H5 \\u5B9A\\u5236\\u573A\\u666F\\uFF0C\\u8FD9\\u5957\\u65B9\\u6848\\u591F\\u7528\\u4E86\\u3002\\u76F8\\u6BD4\\u6D3B\\u52A8 H5 \\u7684\\u90A3\\u79CD\\u5E26\\u6709\\u6570\\u636E\\u8054\\u52A8\\u7684\\u5F62\\u5F0F\\uFF0C\\u8FD9\\u79CD\\u8FD8\\u662F\\u66F4\\u7B80\\u5355\\u4E9B\\uFF0C\\u4E0D\\u9700\\u8981\\u590D\\u6742\\u7684\\u53D6\\u503C\\u548C\\u6570\\u636E\\u540C\\u6B65\\u903B\\u8F91\\u3002\"), mdx(\"p\", null, \"\\u7D6E\\u7D6E\\u53E8\\u53E8\\u7684\\u6D41\\u6C34\\u8D26\\u8BB0\\u4E0B\\u6765\\uFF0C\\u611F\\u89C9\\u6BD4\\u5199\\u6587\\u6863\\u8FD8\\u8D39\\u52B2\\uFF0C\\u4E0D\\u8FC7\\u4E5F\\u7B97\\u662F\\u5BF9\\u81EA\\u5DF1\\u5DE5\\u4F5C\\u7684\\u4E00\\u4E2A\\u603B\\u7ED3\\u3002\"), mdx(\"p\", null, \"\\u5177\\u4F53\\u6548\\u679C\\u53EF\\u4EE5\\u524D\\u5F80\\u9884\\u89C8\\uFF1A\", mdx(\"a\", {\n    parentName: \"p\",\n    \"href\": \"https://app.ubug.io/profess?mode=index\"\n  }, \"H5 \\u62D6\\u653E\\u7F16\\u8F91\\u5668\")));\n}\n;\nMDXContent.isMDXComponent = true;"}},"pageContext":{"isCreatedByStatefulCreatePages":false,"id":"35a34818-564f-5a98-8f95-6581d65262c7","prev":null,"next":{"fileAbsolutePath":"D:/ubug/storybook/content/blog/cdn.md","id":"32a4be1f-afd7-5cf1-aaaf-ccb6e8b3e2aa","parent":{"name":"cdn","sourceInstanceName":"blog"},"excerpt":"主要是想分享一个可用服务的简单实现，很多的大项目看起来很复杂，想要搭起来也非常不切实际，但是 80% 的稳定性实现 80% 的功能也并不是不能尝试。 个人的小项目中很多地方都会用到各种库，NPM 的库更是亲切，以前爪机时代有很多免费的 CDN 可以白嫖，大厂小厂都觉得公共 CDN 的托管还能帮助提高用户体验，强缓存的策略应该成本可控。但是现在越来越多的托管方删库跑路，再加上云服务的 CDN 的很好体验，慢慢的都不做公共 CDN 的托管了。 但是现在云服务上面的 CDN…","fields":{"title":"🪂 手动搭建一个 jsDeliver","slug":"/blog/setup-cdn-for-npm-and-gh","description":"jsDeliver 是一个非常棒的CDN托管服务，但是因为不可名状的原因很早之前就从稳定到不稳定，最终肯定也是稳定的不能用了。觉得整个体验很好，尤其是托管机制非常好玩，这里尝试做一个类似的东西，可以拿来进一步增强小的页面级应用开发体验。","date":"2023-10-17","redirects":null,"datetime":"2023-10-17 14:17:56","categories":["code"],"series":null,"tags":["writing","CDN","npm"],"status":"online"},"frontmatter":{"published":null,"tags":["writing","CDN","npm"],"theme":null,"slug":"setup-cdn-for-npm-and-gh","date":"2023-10-17 14:17:56"},"body":"const _excluded = [\"components\"];\nfunction _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }\nfunction _objectWithoutProperties(e, t) { if (null == e) return {}; var o, r, i = _objectWithoutPropertiesLoose(e, t); if (Object.getOwnPropertySymbols) { var n = Object.getOwnPropertySymbols(e); for (r = 0; r < n.length; r++) o = n[r], -1 === t.indexOf(o) && {}.propertyIsEnumerable.call(e, o) && (i[o] = e[o]); } return i; }\nfunction _objectWithoutPropertiesLoose(r, e) { if (null == r) return {}; var t = {}; for (var n in r) if ({}.hasOwnProperty.call(r, n)) { if (-1 !== e.indexOf(n)) continue; t[n] = r[n]; } return t; }\n/* @jsx mdx */\n\nconst _frontmatter = {\n  \"slug\": \"setup-cdn-for-npm-and-gh\",\n  \"title\": \"🪂 手动搭建一个 jsDeliver\",\n  \"date\": \"2023-10-17 14:17:56\",\n  \"author\": \"Ubug\",\n  \"description\": \"jsDeliver 是一个非常棒的CDN托管服务，但是因为不可名状的原因很早之前就从稳定到不稳定，最终肯定也是稳定的不能用了。觉得整个体验很好，尤其是托管机制非常好玩，这里尝试做一个类似的东西，可以拿来进一步增强小的页面级应用开发体验。\",\n  \"categories\": [\"code\"],\n  \"tags\": [\"writing\", \"CDN\", \"npm\"],\n  \"banner_icon\": \"🚏\",\n  \"banner\": \"./banner.jpg\"\n};\nconst makeShortcode = name => function MDXDefaultShortcode(props) {\n  console.warn(\"Component \" + name + \" was not imported, exported, or provided by MDXProvider as global scope\");\n  return mdx(\"div\", props);\n};\nconst layoutProps = {\n  _frontmatter\n};\nconst MDXLayout = \"wrapper\";\nreturn function MDXContent(_ref) {\n  let {\n      components\n    } = _ref,\n    props = _objectWithoutProperties(_ref, _excluded);\n  return mdx(MDXLayout, _extends({}, layoutProps, props, {\n    components: components,\n    mdxType: \"MDXLayout\"\n  }), mdx(\"hr\", null), mdx(\"p\", null, \"\\u4E3B\\u8981\\u662F\\u60F3\\u5206\\u4EAB\\u4E00\\u4E2A\\u53EF\\u7528\\u670D\\u52A1\\u7684\\u7B80\\u5355\\u5B9E\\u73B0\\uFF0C\\u5F88\\u591A\\u7684\\u5927\\u9879\\u76EE\\u770B\\u8D77\\u6765\\u5F88\\u590D\\u6742\\uFF0C\\u60F3\\u8981\\u642D\\u8D77\\u6765\\u4E5F\\u975E\\u5E38\\u4E0D\\u5207\\u5B9E\\u9645\\uFF0C\\u4F46\\u662F 80% \\u7684\\u7A33\\u5B9A\\u6027\\u5B9E\\u73B0 80% \\u7684\\u529F\\u80FD\\u4E5F\\u5E76\\u4E0D\\u662F\\u4E0D\\u80FD\\u5C1D\\u8BD5\\u3002\"), mdx(\"hr\", null), mdx(\"p\", null, \"\\u4E2A\\u4EBA\\u7684\\u5C0F\\u9879\\u76EE\\u4E2D\\u5F88\\u591A\\u5730\\u65B9\\u90FD\\u4F1A\\u7528\\u5230\\u5404\\u79CD\\u5E93\\uFF0CNPM \\u7684\\u5E93\\u66F4\\u662F\\u4EB2\\u5207\\uFF0C\\u4EE5\\u524D\\u722A\\u673A\\u65F6\\u4EE3\\u6709\\u5F88\\u591A\\u514D\\u8D39\\u7684 CDN \\u53EF\\u4EE5\\u767D\\u5AD6\\uFF0C\\u5927\\u5382\\u5C0F\\u5382\\u90FD\\u89C9\\u5F97\\u516C\\u5171 CDN \\u7684\\u6258\\u7BA1\\u8FD8\\u80FD\\u5E2E\\u52A9\\u63D0\\u9AD8\\u7528\\u6237\\u4F53\\u9A8C\\uFF0C\\u5F3A\\u7F13\\u5B58\\u7684\\u7B56\\u7565\\u5E94\\u8BE5\\u6210\\u672C\\u53EF\\u63A7\\u3002\\u4F46\\u662F\\u73B0\\u5728\\u8D8A\\u6765\\u8D8A\\u591A\\u7684\\u6258\\u7BA1\\u65B9\\u5220\\u5E93\\u8DD1\\u8DEF\\uFF0C\\u518D\\u52A0\\u4E0A\\u4E91\\u670D\\u52A1\\u7684 CDN \\u7684\\u5F88\\u597D\\u4F53\\u9A8C\\uFF0C\\u6162\\u6162\\u7684\\u90FD\\u4E0D\\u505A\\u516C\\u5171 CDN \\u7684\\u6258\\u7BA1\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u4F46\\u662F\\u73B0\\u5728\\u4E91\\u670D\\u52A1\\u4E0A\\u9762\\u7684 CDN\\u3001\\u8FB9\\u7F18\\u8BA1\\u7B97\\u5DF2\\u7ECF\\u5F88\\u6210\\u719F\\u4E86\\uFF0C\\u57FA\\u672C\\u4E0A\\u914D\\u4E2A\\u6E90\\u7AD9\\u5C31\\u80FD\\u76F4\\u63A5\\u4E0A\\u7EBF\\u4F7F\\u7528\\u4E86\\uFF0C\\u6781\\u5927\\u7684\\u63D0\\u9AD8\\u4E86\\u73B0\\u5728\\u751F\\u4EA7\\u73AF\\u5883\\u7684\\u53EF\\u7528\\u6027\\uFF0C\\u66F4\\u7A33\\u5B9A\\u3001\\u53EF\\u5B9A\\u5236\\u3001\\u7B80\\u5355\\u6613\\u7528\\u3002\\u4E0D\\u8FC7\\u4ECA\\u5929\\u8BB2\\u7684\\u4E0D\\u662F\\u9759\\u6001\\u8D44\\u6E90\\u7684\\u5206\\u53D1\\u6280\\u672F\\u67B6\\u6784\\uFF0C\\u800C\\u662F\\u901A\\u7528\\u8D44\\u6E90\\u5C24\\u5176\\u662F\\u516C\\u5171\\u5E93\\u7684\\u7EBF\\u4E0A\\u6258\\u7BA1\\u7684\\u53EF\\u884C\\u6027\\uFF0C\\u6BD5\\u7ADF\\u7B2C\\u4E09\\u65B9\\u4F9D\\u8D56\\u7684\\u5206\\u79BB\\uFF0C\\u4E5F\\u80FD\\u964D\\u4F4E\\u90E8\\u7F72\\u73AF\\u8282\\u7684\\u6253\\u5305\\u548C\\u5206\\u53D1\\u6210\\u672C\\u3002\"), mdx(\"p\", null, \"\\u9488\\u5BF9\\u8FD9\\u4E9B\\u516C\\u5171\\u5E93\\uFF0C\\u5728 jsDeliver \\u80FD\\u7528\\u7684\\u65F6\\u5019\\uFF0C\\u5728\\u4E00\\u4E9B\\u9879\\u76EE\\u4E2D\\u5C1D\\u8BD5\\u4F7F\\u7528\\u4E86\\u4E0B\\uFF0C\\u4F53\\u9A8C\\u8FD8\\u662F\\u4E0D\\u9519\\u7684\\uFF0C\\u4E0D\\u9700\\u8981\\u624B\\u52A8\\u8003\\u8651\\u5E93\\u7684\\u90E8\\u7F72\\u548C\\u53EF\\u7528\\u6027\\u95EE\\u9898\\u3002\\u53EF\\u60DC\\u7684\\u662F\\u73B0\\u5728\\u51E0\\u4E4E\\u6CA1\\u6709\\u653E\\u5FC3\\u514D\\u8D39\\u3001\\u597D\\u7528\\u3001\\u80FD\\u7528\\u7684\\u6258\\u7BA1\\u5E93\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u6240\\u4EE5\\u73B0\\u5728\\u5C1D\\u8BD5\\u505A\\u4E00\\u4E0B\\uFF1A\"), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"jsDeliver\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E3A\\u4EC0\\u4E48\\u597D\\u7528\\uFF0C\\u89E3\\u51B3\\u4E86\\u4EC0\\u4E48\\u95EE\\u9898\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8BED\\u6CD5\\u662F\\u600E\\u4E48\\u6837\\u7684\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6211\\u4EEC\\u5982\\u679C\\u8981\\u5B9E\\u73B0\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u9700\\u8981\\u8003\\u8651\\u54EA\\u4E9B\\u95EE\\u9898\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"parseUrl \\u5230 \\u6587\\u4EF6\\u7684\\u6620\\u5C04\\u903B\\u8F91\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5305\\u7684\\u7F51\\u7EDC\\u548C\\u5B58\\u50A8\\u95EE\\u9898\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7EDF\\u4E00\\u7684\\u5B9E\\u73B0\\u548C\\u7BA1\\u7406\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u767D\\u540D\\u5355\\u5236\\u5EA6\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u56DE\\u6E90\\u548C\\u9884\\u70ED\\u673A\\u5236\"))), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0A\\u751F\\u4EA7\\u9700\\u8981\\u6CE8\\u610F\\u4EC0\\u4E48\", mdx(\"ul\", {\n    parentName: \"li\"\n  }, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"CDN\\u6E90\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7A33\\u5B9A\\u6027\\u548C\\u53EF\\u7528\\u6027\\u6D4B\\u8BD5\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u7F13\\u5B58\\u548Cnginx\\u547D\\u4E2D\\u7B56\\u7565\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u6548\\u7387\\u548C\\u9884\\u70ED\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"fallback \\u548C\\u544A\\u8B66\")))), mdx(\"h2\", null, \"\\u4E00\\u3001jsDeliver \\u5206\\u6790\"), mdx(\"h3\", null, \"1. \\u4E3A\\u4EC0\\u4E48\\u597D\\u7528\"), mdx(\"p\", null, \"jsDeliver \\u4E4B\\u6240\\u4EE5\\u597D\\u7528\\uFF0C\\u4E3B\\u8981\\u89E3\\u51B3\\u4E86\\u4EE5\\u4E0B\\u95EE\\u9898\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"npm\\u548CGitHub\\u8BED\\u6CD5\"), \"\\uFF1A\\u81EA\\u52A8\\u540C\\u6B65 NPM \\u548C GitHub \\u7684\\u5BF9\\u5E94\\u7248\\u672C\\u548C\\u6587\\u4EF6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"HTTPS \\u652F\\u6301\"), \"\\uFF1A\\u9ED8\\u8BA4\\u652F\\u6301 HTTPS\\uFF0C\\u5B89\\u5168\\u6027\\u6709\\u4FDD\\u969C\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u7F13\\u5B58\\u7B56\\u7565\"), \"\\uFF1A\\u667A\\u80FD\\u7F13\\u5B58\\uFF0C\\u51CF\\u5C11\\u91CD\\u590D\\u8BF7\\u6C42\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"API \\u7B80\\u5355\"), \"\\uFF1ACDN URL \\u76F4\\u63A5\\u5BF9\\u5E94 NPM \\u5305\\u5730\\u5740\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u65E0\\u9700\\u5173\\u5FC3\"), \"\\uFF1A\\u4E0D\\u9700\\u8981\\u5173\\u5FC3\\u8DEF\\u7531\\u548C\\u90E8\\u7F72\\uFF0C\\u4E00\\u4E2AURL\\u5C31\\u80FD\\u5BF9\\u5E94\\u5177\\u4F53\\u6587\\u4EF6\")), mdx(\"p\", null, \"\\u8FD9\\u6837\\u7684\\u7B56\\u7565\\uFF0C\\u8BA9\\u5728\\u524D\\u7AEF\\u5F00\\u53D1\\u4E2D\\uFF0C\\u53EF\\u4EE5\\u901A\\u8FC7\\u6807\\u7B7E\\u6216\\u5F15\\u7528\\u76F4\\u63A5\\u4F7F\\u7528\\uFF0C\\u4E0D\\u5FC5\\u64CD\\u5FC3\\u6587\\u4EF6\\u4ECE\\u54EA\\u91CC\\u6765\\u7684\\u95EE\\u9898\\uFF0C\\u5728\\u4E00\\u4E9B\\u5FEB\\u901F\\u9A8C\\u8BC1\\u7684\\u573A\\u666F\\u4E0B\\u6216\\u8005\\u4F9D\\u8D56\\u4E00\\u4E9B\\u5916\\u90E8\\u8D44\\u6E90\\u7684\\u65F6\\u5019\\uFF0C\\u80FD\\u591F\\u62FF\\u6765\\u5C31\\u7528\\u3002\"), mdx(\"h3\", null, \"2. \\u4F7F\\u7528\\u8BED\\u6CD5\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-html\"\n  }, \"<!-- NPM \\u5305 -->\\n<script src=\\\"https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js\\\"></script>\\n\\n<!-- GitHub \\u6587\\u4EF6 -->\\n<script src=\\\"https://cdn.jsdelivr.net/gh/user/repo@main/dist/bundle.js\\\"></script>\\n\\n<!-- \\u76F4\\u63A5\\u6587\\u4EF6 -->\\n<link rel=\\\"stylesheet\\\" href=\\\"https://cdn.jsdelivr.net/npm/normalize.css@8.0.1/normalize.css\\\">\\n\")), mdx(\"h3\", null, \"3. \\u4E3A\\u4EC0\\u4E48\\u65E0\\u6CD5\\u4F7F\\u7528\"), mdx(\"p\", null, \"\\u8FD9\\u4E2A\\u5F88\\u5BB9\\u6613\\u5C31\\u610F\\u8BC6\\u5230\\uFF0C\\u8FD9\\u79CD\\u65B9\\u4FBF\\u7684\\u7B56\\u7565\\uFF0C\\u5BF9\\u5E94\\u7684\\u662F\\u5185\\u5BB9\\u6EE5\\u7528\\u3001\\u5B89\\u5168\\u98CE\\u9669\\u3001\\u4E0D\\u53EF\\u63A7\\u7B49\\u95EE\\u9898\\u3002\\u8FD9\\u4E5F\\u662F\\u5F88\\u5BB9\\u6613\\u7406\\u89E3\\u7684\\uFF0C\\u65E0\\u8BBA\\u662F\\u5927\\u5382\\u5C0F\\u5382\\u8FD8\\u662F\\u76D1\\u7BA1\\u90E8\\u95E8\\uFF0C\\u8FD9\\u79CD\\u4E0D\\u53EF\\u63A7\\u7684\\u611F\\u89C9\\u662F\\u4E00\\u7968\\u5426\\u51B3\\u5236\\u7684\\u3002\"), mdx(\"p\", null, \"\\u6211\\u5012\\u662F\\u89C9\\u5F97\\u8FD9\\u4E9B\\u7B56\\u7565\\u5F88\\u5BF9\\u80C3\\u53E3\\uFF0C\\u60F3\\u5C0F\\u8303\\u56F4\\u7684\\u4F7F\\u7528\\u4E0B\\u5462\\uFF1F\\u76F4\\u63A5\\u90E8\\u7F72 JSDeliver \\u7684\\u6E90\\u7AD9\\uFF1F\\u5443\\u5443\\u5443...\\u786E\\u5B9E\\u6CA1\\u90A3\\u4E48\\u5927\\u5FC5\\u8981\\uFF0C\\u7B80\\u5355\\u5B9E\\u73B0\\u8D77\\u6765\\u5E94\\u8BE5\\u4E0D\\u96BE\\uFF0C\\u4E0B\\u9762\\u5C31\\u8BD5\\u4E0B\\u3002\"), mdx(\"h2\", null, \"\\u4E8C\\u3001\\u5B9E\\u73B0\\u65B9\\u6848\"), mdx(\"p\", null, \"\\u8BBE\\u8BA1\\u5927\\u6982\\u76EE\\u6807\\u662F\\u81EA\\u52A8\\u5C06\\u6211\\u4EECURL\\u8BF7\\u6C42\\u7684\\u8D44\\u6E90\\uFF0C\\u81EA\\u52A8\\u4E0B\\u8F7D\\u7F13\\u5B58\\uFF0C\\u7136\\u540E\\u4EA4\\u7ED9 CDN \\u8282\\u70B9\\u3002\\u6838\\u5FC3\\u90E8\\u5206\\u662F\\u6211\\u4EEC\\u81EA\\u5DF1\\u670D\\u52A1\\u5668\\u7684\\u8BED\\u6CD5\\u89E3\\u6790\\u3001\\u4EE3\\u7406\\u4E0B\\u8F7D\\u3001\\u7136\\u540E\\u7F13\\u5B58\\u5B58\\u50A8\\u3002\"), mdx(\"h3\", null, \"1. \\u7CFB\\u7EDF\\u67B6\\u6784\\u8BBE\\u8BA1\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\"\n  }, \"\\u7AEF\\u4FA7\\u8BF7\\u6C42 \\u2192 CDN\\u8FB9\\u7F18\\u8282\\u70B9 \\u2192 \\u56DE\\u6E90\\u670D\\u52A1\\u5668 \\u2192 URL\\u8BED\\u6CD5\\u89E3\\u6790 \\u2192 \\u4EE3\\u7406\\u4E0B\\u8F7D \\u2192 \\u5B58\\u50A8\\u672C\\u5730 \\u2192 \\u54CD\\u5E94\\u56DE\\u6E90\\n\")), mdx(\"ul\", null, mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u8D44\\u6E90\\u4F7F\\u7528\\u767D\\u540D\\u5355\\u7B56\\u7565\\uFF0C\\u9632\\u6B62\\u6EE5\\u7528\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4E0B\\u8F7D\\u90E8\\u5206\\uFF0C\\u4F7F\\u7528\\u81EA\\u5EFA\\u7684\\u4EE3\\u7406\\uFF0C\\u4FDD\\u8BC1\\u5B89\\u5168\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u5B58\\u50A8\\u90E8\\u5206\\uFF0C\\u4F7F\\u7528\\u672C\\u5730\\u5B58\\u50A8\\uFF0C\\u4FDD\\u8BC1\\u53EF\\u7528\\u6027\"), mdx(\"li\", {\n    parentName: \"ul\"\n  }, \"\\u4F7F\\u7528\\u8DEF\\u5F84\\u5339\\u914D\\u7B56\\u7565\\u89E3\\u6790\\u5305\\u76EE\\u6807\")), mdx(\"h3\", null, \"2. \\u6838\\u5FC3\\u529F\\u80FD\\u6A21\\u5757\"), mdx(\"h4\", null, \"a. \\u4E3B\\u670D\\u52A1\"), mdx(\"p\", null, \"\\u7528 fastify \\u505A\\u7B80\\u5355\\u7684\\u8DEF\\u7531\\u670D\\u52A1\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"const path = require('node:path')\\nconst fastify = require('fastify')\\nconst fastifyStatic = require('@fastify/static')\\n\\nconst setRouteNpm = require('./routes/npm')\\nconst setRouteGH = require('./routes/gh')\\n\\nconst server = fastify({ logger: true })\\n\\n// \\u9996\\u9875\\nserver.get('/', async (request, reply) => {\\n  reply.type('application/json').code(200)\\n  const list = require('./lib-list/all.json')\\n  return {\\n    desc: 'only support libs from this list',\\n    libs: list,\\n    usage: {\\n      npm: 'load npm project: https://c.ubug.io/npm/[package]@[version]/[filePath]',\\n      gh: 'load github project: https://cdn.jsdelivr.net/gh/[repoOwner]/[repoName]@[archiveTagName]/[filePath]',\\n      tagOrVersion: '[version] & [archiveTagName] must specify, cant be lastest/master/dev/...',\\n      fileMin: 'files with suffix `js css svg json html? vue`, support [.min] to minify content',\\n      filesList: '[filePath] end with folder will list files in that folder',\\n    },\\n    warning: [\\n      'This project is only for personal use, please do not use it for commercial purposes.',\\n      'No tech support, No service commitment, No features request. Use at your own risk.',\\n      'Love from UBUG.',\\n    ]\\n  }\\n})\\n\\nsetRouteNpm(server)\\nsetRouteGH(server)\\n\\nserver.setNotFoundHandler({}, function (request, reply) {\\n  reply.type('application/json').code(404)\\n  return { not: '404', found: request.url }\\n})\\n\\nserver.listen({ port: 3003 }, function (err, address) {\\n  if (err) {\\n    server.log.error(err)\\n    process.exit(1)\\n  }\\n  server.log.info(`server listening on ${address}`)\\n})\\n\")), mdx(\"h4\", null, \"a. NPM \\u90E8\\u5206\\u7684\\u89E3\\u6790\\u548C\\u5B58\\u50A8\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"const Fastify = require('fastify')\\nconst pacote = require('pacote')\\nconst fs = require('node:fs');\\nvar mime = require('mime-types')\\nconst semver = require(\\\"semver\\\")\\nconst dirList = require('@fastify/static/lib/dirList')\\nconst utils = require('../utils')\\n\\n/**\\n * @param  {Fastify} server\\n */\\nmodule.exports = (server) => {\\n  server.get('/npm/:package@version/*', async (request, reply) => {\\n    const pkgWithVer = request.params['package@version']\\n    const targetRelPath = request.params['*']\\n\\n    if (!/@/.test(pkgWithVer)) {\\n      reply.code(400)\\n      return 'request fail, version not found';\\n    }\\n\\n    const pkgFilePath = pkgWithVer + '/' + targetRelPath\\n    const pkgFullPath = utils.downloadsNpmPath + '/' + pkgWithVer\\n    const fileFullPath = pkgFullPath + '/' + targetRelPath\\n\\n    // \\u81EA\\u52A8\\u4E0B\\u8F7D\\n    if (!fs.existsSync(pkgFullPath)) {\\n      const pkgName = pkgWithVer.split('@')[0]\\n      if (utils.isSupportNpm(pkgName)) {\\n        const version = pkgWithVer.split('@')[1]\\n\\n        if (!semver.valid(version)) {\\n          reply.code(400)\\n          return 'request fail, version not valid';\\n        }\\n\\n        try {\\n          const { from, resolved, integrity } = await pacote.extract(pkgWithVer, pkgFullPath, {\\n            registry: \\\"https://registry.npmmirror.com\\\",\\n          })\\n          console.log('extracted!', from, resolved, integrity)\\n        } catch (error) {\\n          reply.code(500)\\n          console.log(error)\\n          return 'package is supported, but extract failed!';\\n        }\\n      } else {\\n        reply.code(404)\\n        return 'package is not supported';\\n      }\\n    }\\n    if (!fs.existsSync(fileFullPath)) {\\n      // min \\u547D\\u4EE4\\u63A7\\u5236\\n      const result = await utils.minifyCode(fileFullPath, pkgFilePath)\\n      if (result == 404) {\\n        reply.code(404)\\n        return 'package is supported, but the file you request is not found!';\\n      } else if (result == 500) {\\n        reply.code(500)\\n        return 'minify source fail';\\n      }\\n    }\\n    // \\u6587\\u4EF6\\u5217\\u8868\\u529F\\u80FD\\n    if (fs.lstatSync(fileFullPath).isDirectory()) {\\n      dirList.send({\\n        reply,\\n        dir: fileFullPath,\\n        options: {\\n          render: utils.listRender('npm', pkgFilePath),\\n          format: 'html',\\n        },\\n        route: pkgFilePath,\\n        prefix: '',\\n        dotfiles: \\\"deny\\\",\\n      })\\n      return reply\\n    } else {\\n      reply.code(200)\\n        // \\u8FD4\\u56DE\\u6B63\\u786E\\u7684\\u54CD\\u5E94\\uFF0C\\u4EE5\\u4FBF\\u80FD\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u76F4\\u63A5\\u4F7F\\u7528\\n        .type(mime.lookup(fileFullPath))\\n        // \\u63A7\\u5236\\u7F13\\u5B58\\uFF0C\\u56E0\\u4E3A\\u662F\\u5E26\\u6709\\u7248\\u672C\\u53F7\\u7684\\u5E93\\u6587\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u5F3A\\u5236\\u7F13\\u5B58\\u5F88\\u957F\\u65F6\\u95F4\\n        .header('Cache-Control', 'max-age=31104000') // 360 \\u5929\\u7684\\u5F3A\\u7F13\\u5B58\\n\\n      utils.setHeaders(request, reply)\\n\\n      return fs.createReadStream(fileFullPath, 'utf8')\\n    }\\n  })\\n}\\n\\n\")), mdx(\"h4\", null, \"b. gh \\u90E8\\u5206\\u7684\\u89E3\\u6790\\u548C\\u670D\\u52A1\"), mdx(\"pre\", null, mdx(\"code\", {\n    parentName: \"pre\",\n    \"className\": \"language-javascript\"\n  }, \"const Fastify = require('fastify')\\nconst gitly = require('gitly')\\nconst fs = require('node:fs');\\nvar mime = require('mime-types')\\nconst dirList = require('@fastify/static/lib/dirList')\\nconst utils = require('../utils')\\n\\nconst ghDownload = async (repoWithTag, repoFullPath) => {\\n  let tryProxys = [\\n    (originUrl) => `/to/your/proxy/${originUrl}`,\\n    (originUrl) => `/to/your/proxy2/${originUrl}`,\\n  ]\\n  let isOK = false\\n\\n  for (let i = 0; i < tryProxys.length; i++) {\\n    if (isOK) return;\\n    const proxyFilter = tryProxys[i];\\n\\n    try {\\n      const [source, destination] = await gitly.default(repoWithTag.replace('@', '#'), repoFullPath, {\\n        throw: true,\\n        url: {\\n          filter: (info) => {\\n            const { path: repo, type } = info\\n            const originUrl = `https://github.com${repo}/archive/${type}.tar.gz`\\n            const proxyUrl = proxyFilter(originUrl)\\n            console.log(proxyUrl)\\n            return proxyUrl\\n          }\\n        },\\n      })\\n      isOK = true\\n    } catch (error) {\\n      console.log(error)\\n    }\\n  }\\n  if (!isOK) {\\n    throw Error('gitly fetch repo fail')\\n  }\\n}\\n\\n/**\\n * @param  {Fastify} server\\n */\\nmodule.exports = (server) => {\\n  server.get('/gh/:user/:repo@tag/*', async (request, reply) => {\\n    const repoWithTag = request.params['user']+'/'+request.params['repo@tag']\\n    const targetRelPath = request.params['*']\\n\\n    // \\u56E0\\u4E3A\\u5F3A\\u7F13\\u5B58\\uFF0C\\u6240\\u4EE5 master/dev \\u4E4B\\u7C7B\\u7684\\u5206\\u652F\\u540D\\u4E0D\\u53EF\\u4EE5\\n    if (!/@/.test(repoWithTag)) {\\n      reply.code(400)\\n      return 'request fail. tag not found';\\n    }\\n\\n    const repoFilePath = repoWithTag + '/' + targetRelPath\\n    const repoFullPath = utils.downloadsGHPath + '/' + repoWithTag\\n    const fileFullPath = repoFullPath + '/' + targetRelPath\\n\\n    // \\u81EA\\u52A8\\u4E0B\\u8F7D\\n    if (!fs.existsSync(repoFullPath)) {\\n      const repoName = repoWithTag.split('@')[0]\\n      if (utils.isSupportGH(repoName)) {\\n        const tag = repoWithTag.split('@')[1]\\n\\n        // \\u5FC5\\u987B\\u6307\\u5B9A tag\\uFF0C\\u4E0D\\u80FD\\u662F\\u9ED8\\u8BA4\\u7684 master\\uFF0C\\u5FC5\\u987B\\u662F tag\\n        if (tag === 'master') {\\n          reply.code(400)\\n          return 'request fail, tag not valid';\\n        }\\n\\n        try {\\n          await ghDownload(repoWithTag, repoFullPath)\\n        } catch (error) {\\n          reply.code(500)\\n          console.log(error)\\n          return 'package is supported, but extract failed!';\\n        }\\n      } else {\\n        reply.code(404)\\n        return 'package is not found';\\n      }\\n    }\\n    if (!fs.existsSync(fileFullPath)) {\\n      // min \\u547D\\u4EE4\\u63A7\\u5236\\n      const result = await utils.minifyCode(fileFullPath, repoFilePath)\\n      if (result == 404) {\\n        reply.code(404)\\n        return 'package is supported, but the file you request is not found!';\\n      } else if (result == 500) {\\n        reply.code(500)\\n        return 'minify source fail';\\n      }\\n    }\\n    // \\u6587\\u4EF6\\u5217\\u8868\\u529F\\u80FD\\n    if (fs.lstatSync(fileFullPath).isDirectory()) {\\n      dirList.send({\\n        reply,\\n        dir: fileFullPath,\\n        options: {\\n          render: utils.listRender('gh', repoFilePath),\\n          format: 'html',\\n        },\\n        route: repoFilePath,\\n        prefix: '',\\n        dotfiles: \\\"deny\\\",\\n      })\\n      return reply\\n    } else {\\n      reply.code(200)\\n        // \\u8FD4\\u56DE\\u6B63\\u786E\\u7684\\u54CD\\u5E94\\uFF0C\\u4EE5\\u4FBF\\u80FD\\u5728\\u6D4F\\u89C8\\u5668\\u4E2D\\u76F4\\u63A5\\u4F7F\\u7528\\n        .type(mime.lookup(fileFullPath))\\n        // \\u63A7\\u5236\\u7F13\\u5B58\\uFF0C\\u56E0\\u4E3A\\u662F\\u5E26\\u6709\\u7248\\u672C\\u53F7\\u7684\\u5E93\\u6587\\u4EF6\\uFF0C\\u53EF\\u4EE5\\u5F3A\\u5236\\u7F13\\u5B58\\u5F88\\u957F\\u65F6\\u95F4\\n        .header('Cache-Control', 'max-age=31104000') // 360 \\u5929\\u7684\\u5F3A\\u7F13\\u5B58\\n\\n      utils.setHeaders(request, reply)\\n\\n      return fs.createReadStream(fileFullPath, 'utf8')\\n    }\\n  })\\n}\\n\")), mdx(\"h3\", null, \"3. \\u90E8\\u7F72\\u65B9\\u6848\"), mdx(\"p\", null, \"\\u76F4\\u63A5 nginx \\u90E8\\u7F72\\u5373\\u53EF\\uFF0C\\u8FD9\\u91CC\\u5C31\\u4E0D\\u591A\\u8BF4\\u4E86\\u3002\"), mdx(\"p\", null, \"\\u901A\\u8FC7\\u4EE5\\u4E0A\\u65B9\\u6848\\uFF0C\\u6211\\u4EEC\\u53EF\\u4EE5\\u642D\\u5EFA\\u4E00\\u4E2A\\u7A33\\u5B9A\\u53EF\\u9760\\u7684 CDN \\u670D\\u52A1\\uFF0C\\u867D\\u7136\\u529F\\u80FD\\u4E0D\\u5982 jsDeliver \\u5B8C\\u5584\\uFF0C\\u4F46\\u8DB3\\u4EE5\\u6EE1\\u8DB3\\u4E00\\u822C\\u7684\\u65E5\\u5E38\\u9700\\u6C42\\u3002\"), mdx(\"p\", null, \"\\u5177\\u4F53\\u7684\\u4F7F\\u7528\\u573A\\u666F\\u662F\\u5728\\u4E00\\u4E9B\\u5C0F\\u7684\\u9875\\u9762\\u7EA7\\u522B\\u5E94\\u7528\\u4E2D\\u4F7F\\u7528\\uFF0C\\u5FEB\\u901F\\u9A8C\\u8BC1\\u3001\\u5FEB\\u901F\\u90E8\\u7F72\\uFF0C\\u4E0D\\u9700\\u8981\\u592A\\u590D\\u6742\\u7684\\u6253\\u5305\\u4F18\\u5316\\u548C\\u90E8\\u7F72\\u6D41\\u7A0B\\u3002\"), mdx(\"h2\", null, \"\\u60F3\\u8BA9\\u8BFB\\u8005\\u4E86\\u89E3\\u7684\\u4E8B\\u60C5\"), mdx(\"p\", null, \"\\u5728\\u9605\\u8BFB\\u8FD9\\u7BC7\\u5173\\u4E8E\\u624B\\u52A8\\u642D\\u5EFA CDN \\u7684\\u6587\\u7AE0\\u524D\\uFF0C\\u5E0C\\u671B\\u4F60\\u80FD\\u7406\\u89E3\\uFF1A\"), mdx(\"ol\", null, mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"CDN \\u7684\\u6838\\u5FC3\\u4EF7\\u503C\"), \" - \\u5C06\\u5185\\u5BB9\\u5206\\u53D1\\u5230\\u6700\\u8FD1\\u7684\\u8282\\u70B9\\uFF0C\\u52A0\\u901F\\u8BBF\\u95EE\\u901F\\u5EA6\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u5F00\\u6E90 CDN \\u7684\\u91CD\\u8981\\u6027\"), \" - \\u89E3\\u51B3\\u516C\\u5171\\u5E93\\u8BBF\\u95EE\\u4E0D\\u7A33\\u5B9A\\u7684\\u95EE\\u9898\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u6280\\u672F\\u5B9E\\u73B0\\u7684\\u6743\\u8861\"), \" - \\u5728\\u529F\\u80FD\\u3001\\u6210\\u672C\\u548C\\u7A33\\u5B9A\\u6027\\u4E4B\\u95F4\\u627E\\u5230\\u5E73\\u8861\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u8FD0\\u7EF4\\u7684\\u590D\\u6742\\u6027\"), \" - CDN \\u4E0D\\u4EC5\\u4EC5\\u662F\\u6280\\u672F\\u95EE\\u9898\\uFF0C\\u8FD8\\u6709\\u8FD0\\u7EF4\\u548C\\u6210\\u672C\\u8003\\u91CF\"), mdx(\"li\", {\n    parentName: \"ol\"\n  }, mdx(\"strong\", {\n    parentName: \"li\"\n  }, \"\\u81EA\\u5EFA vs \\u4F7F\\u7528\"), \" - \\u6839\\u636E\\u56E2\\u961F\\u89C4\\u6A21\\u548C\\u9700\\u6C42\\u9009\\u62E9\\u5408\\u9002\\u7684\\u65B9\\u6848\")));\n}\n;\nMDXContent.isMDXComponent = true;"}}}}